<template>
  <div class="important">
    <MoniterItem title="各乡镇场所及扫码情况">
      <template #content>
        <div style="height: 39.9vh">
          <div class="line" style="font-size: 14px; font-weight:600;">
            <div style="flex: 0.5">排名</div>
            <div style="flex: 1">乡镇名称</div>
            <div style="flex: 0.8">场所数量</div>
            <div style="flex: 0.8">当日扫码数量</div>
          </div>
          <div style="height: 85%; font-size: 14px; overflow: auto" id="tableList2">
            <div
              :class="{ line: true, lineColor: index % 2 === 1 }"
              v-for="(item, index) in tableData"
              :key="index"
              ref="tableRef"
            >
              <div style="flex: 0.5" class="circle-box">
                <div class="circle">{{ index + 1 }}</div>
              </div>
              <div style="flex: 1">{{ item.placeName }}</div>
              <div style="flex: 0.8">{{ item.placeType }}</div>
              <div style="flex: 0.8; color: #00EAFF">{{ item.total }}</div>
            </div>
          </div>
        </div>
      </template>
    </MoniterItem>
  </div>
</template>

<script>
import MoniterItem from "@/components/MoniterCard.vue";
import request from "../../../utils/request.js";
export default {
  components: {
    MoniterItem,
  },
  data() {
    return {
      // 表格数据
      tableData: [
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        },
        {
          placeName: "黄寨镇",
          placeType: "12",
          total: "22",
          yellows: "34",
          reds: "44",
          quarantine: "34",
        }
      ]
    }
  },
  mounted() {
   
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
.scEffect {
  height: 10vh;
  display: flex;
  flex-direction: row;

  .scChart {
    position: relative;
    margin-left: 20px;
    height: 100%;
    width: 180px;
    .scChartDesc {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      width: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 16px;
      top: 0;
      left: 0;
      color: white;
      z-index: 999;
      position: absolute;
    }
  }
  .descItems {
    display: flex;
    flex-direction: row;
    align-items: center;
    .descItem {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 65px;
      width: 74px;
      background-color: rgba(24, 119, 201, 1);
      margin: 10px;
      border-radius: 5px;
      font-size: 14px;
      .scText {
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
}

// 表格样式
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  div {
    text-align: center;
  }
}
.lineColor {
  background-color: #2a64b1;
}

.circle-box {
  display: flex;
  justify-content: center;
}

.circle {
  width: 21px;
  height: 21px;
  background-image: url('@/assets/circle.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
